<script setup>
	import { ref } from 'vue'
	import { useAddressStore } from '@/store/address'
	const addressStore = useAddressStore( )

	// 选择地址
	const chooseAddress = ( ) => {
		wx.chooseAddress( {
			success( res ) {
				addressStore.updateConsigneeInfo( {
					consigneeName: res.userName,
					telNumber: res.telNumber,
					addressData: `${res.provinceName}${res.cityName}${res.countyName}${res.detailInfo}`
				} )
			},
			fail( err ) {
				uni.showToast( {
					title: '获取地址失败',
					icon: 'none'
				} )
			}
		} )
	}
</script>
<template>
	<view class="address" @tap="chooseAddress">
		<view class="left">
			<view class="icon">
				<uni-icons custom-prefix="iconfont" color="#ced4da" :size="20"
					type="yuan-dingwei"></uni-icons>
			</view>
			<view class="text">
				<template v-if="addressStore.consigneeInfo.addressData">
					<view class="value">
						{{ addressStore.consigneeInfo.addressData }}
					</view>
					<view class="userInfo">
						{{ addressStore.consigneeInfo.consigneeName }}
						{{ addressStore.consigneeInfo.telNumber }}
					</view>
				</template>
				<template v-else>
					请选择收货地址
				</template>
			</view>
		</view>
		<view class="icon-right">
			<uni-icons custom-prefix="iconfont" color="#ced4da" :size="20"
				type="yuan-a-ArrowRight2"></uni-icons>
		</view>
	</view>
</template>


<style lang="scss" scoped>
	.address {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		padding: 24rpx;
		background-color: #fff;
		border-radius: 24rpx;

		.left {
			display: flex;
			align-content: center;

			.icon {
				margin-right: 8rpx;
			}

			.text {
				color: $text-font-color-2;

				.value {
					font-size: 28rpx;
				}

				.userInfo {
					margin-top: 8rpx;
					font-size: 24rpx;
					color: $text-font-color-3;
				}
			}
		}

		.icon-right {}
	}
</style>